<template>
  <basic-container size="mini">
    <div class="df" style="margin-bottom: 25px;">
      <div class="block">
        <span class="demonstration">选择月份：</span>
        <el-date-picker v-model="value1" type="monthrange" range-separator="~" :start-placeholder=oldData
          :end-placeholder=newData size="mini">
        </el-date-picker>
      </div>
      <div class="block">
        <span>状态：</span>
        <el-select v-model="form1.status" placeholder="请选择" size="mini" :clearable="true">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="search" size="small" style="padding: 0 20px;">查询</el-button>
    </div>
    <el-button type="primary" size="small" style="margin: 0px 0px 25px ;" @click="dialogVisible = true"
      v-if="userInfo.role_name.includes('medical', 'cityAdmin')">上传采购订单</el-button>
    <el-table :data="tableData" style="width: 100%;min-height: 530px;" size="mini">
      <el-table-column label="采购月份" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ formatMonth(scope.row.month) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="配送企业" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="配送完成量" width="200">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.deliveryVolume"></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="配送药品入库量" width="200">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.inboundVolume"></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200">
        <template slot-scope="scope">
          <el-tag :type="typec(scope)" plain disabled size="small">{{ scope.row.label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
            v-if="scope.row.status == 3 ? userInfo.role_name.includes('cityAdmin') : userInfo.role_name.includes('medical', 'cityAdmin')"
            @click="Change(scope.row)" size="small">修改</el-button>
          <el-popconfirm style="margin: 0 10px;" :title='scope.row.deliver_user ? "订单已配送，请确认是否删除" : "请确认是否删除"'
            @confirm="handleDelete(scope.row.id)" class="ml10">
            <el-button slot="reference"
              v-if="scope.row.status == 3 ? userInfo.role_name.includes('cityAdmin') : userInfo.role_name.includes('medical', 'cityAdmin')"
              size="small">删除</el-button>
          </el-popconfirm>
          <el-button type="primary" @click="toSend(scope.row)"
            v-if="scope.row.status == 3 ? userInfo.role_name.includes('cityAdmin') : userInfo.role_name.includes('distribution', 'cityAdmin')"
            size="small">配送</el-button>
          <el-button type="primary"
            v-if="scope.row.status == 3||scope.row.status == 1 ? userInfo.role_name.includes('cityAdmin') : userInfo.role_name.includes('medical', 'cityAdmin')"
            @click="toCheck(scope.row)" size="small">核对入库量</el-button>
          <el-button type="primary" v-if="scope.row.status == 3" @click="toDetail(scope.row)" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 20px 0;margin-left: 75%;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="form1.current" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="Size"
        :page-sizes="[10, 20, 30, 40]">
      </el-pagination>
    </div>
    <el-dialog v-if="dialogVisible1" :width="dialogScreen1 ? '' : '1500px'" style="height: 1000px;"
      :visible.sync="dialogVisible1" append-to-body :fullscreen="dialogScreen1"
      :class="[dialogScreen1 ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeScreen1">
      <template slot="title">
        <div class="custom_dialog_header">
          <span class="el_dialog_title"></span>
          <div class="custom_dialog_menu">
            <i :class="dialogScreen1 ? 'el-icon-news' : 'el-icon-full-screen'" @click="dialogScreen1 = !dialogScreen1"></i>
          </div>
        </div>
      </template>
      <shipping :Send="SendData" :flag="dialogVisible1" @changeTwo="changeTo"></shipping>
    </el-dialog>
    <el-dialog v-if="dialogVisible2" :width="dialogScreen ? '' : '1500px'" :visible.sync="dialogVisible2" append-to-body
      :fullscreen="dialogScreen" :class="[dialogScreen ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeScreen">
      <template slot="title">
        <div class="custom_dialog_header">
          <span class="el_dialog_title"></span>
          <div class="custom_dialog_menu">
            <i :class="dialogScreen ? 'el-icon-news' : 'el-icon-full-screen'" @click="dialogScreen = !dialogScreen"></i>
          </div>
        </div>
      </template>
      <Check :Check="CheckData" :dialogScreen="dialogScreen" :flag1="dialogVisible2" @changeSon="changedia"></Check>
    </el-dialog>
    <el-dialog v-if="dialogVisible3" :width="dialogScreen3 ? '' : '1500px'" :visible.sync="dialogVisible3" append-to-body
      :fullscreen="dialogScreen3" :class="[dialogScreen3 ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeScreen">
      <template slot="title">
        <div class="custom_dialog_header">
          <span class="el_dialog_title"></span>
          <div class="custom_dialog_menu">
            <i :class="dialogScreen3 ? 'el-icon-news' : 'el-icon-full-screen'" @click="dialogScreen3 = !dialogScreen3"></i>
          </div>
        </div>
      </template>
      <orderDetail :Check="CheckData" :dialogScreen3="dialogScreen3" :flag1="dialogVisible3" @changeSon="changedia">
      </orderDetail>
    </el-dialog>
    <el-dialog width="510px" title="上传采购订单" :visible.sync="dialogVisible" append-to-body :before-close="changeUnload"
      v-if="dialogVisible">
      <unload :unloadData="unloadData" :flag2="dialogVisible" @changeUnload="changeUpload"></unload>
    </el-dialog>
  </basic-container>
</template>

<script>
import shipping from "../../components/order/shipping.vue";
import orderDetail from "../../components/order/orderDetail.vue";
import Check from "../../components/order/check.vue";
import unload from "../../components/order/unload.vue";
import { mapGetters } from 'vuex'
import { exportBlob } from "@/api/common";
import { getToken } from '@/util/auth'
import { getList, remove} from "../../api/businessTwo/order"
export default {
  components: {
    shipping,
    Check,
    unload,
    orderDetail
  },
  mounted() {

  },
  data() {
    return {
      dialogVisible3: false,
      dialogScreen3: false,
      dialogScreen1: false,
      dialogScreen: false,
      unloadData: {
        orderId: "",
        orderNo: "",
        isUpdate: false,
        month: "",
        claimCompanyId: "",
        deliveryCompanyName: ""
      },
      allTRUE: false,
      CheckData: {},
      dialogVisible: false,
      dialogVisible2: false,
      from: {},
      SendData: {},
      form1: {
        status: null,
        current: 1,
        size: 10
      },
      Size: 10,
      form: "",
      newData: "",
      oldData: "",
      dialogVisible1: false,
      propsHttp: {
        url: 'url',
        name: 'name',
        res: 'data'
      },
      options: [
        {
          value: 1,
          label: '待配送'
        },
        {
          value: 2,
          label: '待确认'
        },
        {
          value: 3,
          label: '确认通过'
        }
      ],
      creatMaster: "",
      editForm: {},

      value1: [],
      page: {
        pageSize: 20
      },
      tableData: []
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.getList();
    this.today();
  },
  methods: {
    formatMonth(dateString) {
      const year = dateString.slice(0, 4);
      const month = dateString.slice(4);

      const formattedDate = `${year}年${Number(month)}月`;
      return formattedDate;
    },
    toCheck(data) {
      this.dialogVisible2 = true
      this.CheckData = data
    },
    toSend(data) {
      this.dialogVisible1 = true
      this.SendData = data
      console.log(data, this.SendData);
    },
    Change(row) {
      console.log(this.unloadData);
      this.unloadData.orderId = row.id
      this.unloadData.orderNo = row.orderNo
      this.unloadData.isUpdate = true
      this.unloadData.month = row.month
      this.unloadData.claimCompanyId = row.instId
      this.unloadData.deliveryCompanyName = row.companyName
      this.dialogVisible = true

    },
    changeUnload() {
      this.unloadData = {
        orderId: "",
        orderNo: "",
        isUpdate: false,
        month: "",
        claimCompanyId: "",
        deliveryCompanyName: ""
      }
      this.dialogVisible = false
    },

    search() {
      let arr = []
      if (this.value1) {
        this.value1.map((v) => {
          arr.push(this.format(v));
        })
        this.form1.startTime = arr[0]
        this.form1.endTime = arr[1]
      } else {
        this.form1.startTime = null
        this.form1.endTime = null
      }

      this.getList()

    },
    changeTo(data) {
      this.dialogVisible1 = data
      this.dialogScreen1 = data
      this.getList()
    },
    toDetail(data) {
      this.dialogVisible3 = true
      this.CheckData = data
    },
    changedia(data) {
      this.dialogVisible2 = data
      this.dialogScreen = data
      this.dialogScreen3 = data
      this.dialogVisible3 = data
      setTimeout(() => {

        this.getList()
      }, 1000)


    },
    changeUpload(data) {
      this.dialogVisible = data
      this.unloadData = {
        orderId: "",
        orderNo: "",
        isUpdate: false,
        month: "",
        claimCompanyId: "",
        deliveryCompanyName: ""
      }
      this.getList()
    },
    come() {
      window.setTimeout(function () {
        window.location.reload();
      }, 1000)
    },
    changeScreen1() {
      this.dialogVisible1 = false
      this.dialogScreen1 = false
    },
    async getList() {
      console.log(this.form1);
      getList(this.form1).then((res) => {
        console.log(res);
        this.tableData = res.data.data.records
        console.log(this.tableData);
        this.Size = res.data.data.total

      })


    },
    format(dateTimeString) {
      const date = new Date(dateTimeString);

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');

      const formattedDate = `${year}${month}`;
      return formattedDate;
    },
    handleTemplate() {
      exportBlob(`/api/medpurBatch/download?${this.website.tokenHeader}=${getToken()}&templateName=${this.templateName}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('模板文件不存在!');
        }
      });
    },
    handleSizeChange(row) {
      this.form1.size = row
      console.log(row);
      this.getList()
    },
    handleCurrentChange(row) {
      this.form1.current = row
      this.getList()
    },
    typec(a) {
      if (a.row.status == 1) {
        a.row.label = "待配送"
        return "info"
      } else if (a.row.status == 2) {
        a.row.label = "待确认"
        return "primary"
      } else if (a.row.status == 3) {
        a.row.label = "确认通过"
        return "success"
      }
    },
    changeScreen() {
      this.dialogVisible2 = false
      this.dialogScreen = false
      this.dialogScreen3 = false
      this.dialogVisible3 = false
    },
    check() {
      this.$router.push("/businessTwo/orderRefund")
    },
    jump() {
      this.dialogVisible1 = false
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(ids) {
      remove(ids).then(() => {
        this.getList();
        this.$message.success('删除成功');
      });
    },

    today() {
      let data = new Date();
      let year = data.getFullYear()
      let month = data.getMonth() + 1;
      let oldMonth = month - 2;
      this.newData = `${year}-${month}`;
      this.oldData = `${year}-${oldMonth}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-right: 64px;
}

.df {
  display: flex;
}

.cell {
  text-align: center;

}

::v-deep .el-dialog__body {
  padding: 0 20px !important;
}

::v-deep .el-dialog {
  z-index: 9999;
}

.custom_dialog_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom_dialog_menu {
  padding: 0px 30px 0 0;
}

.custom_dialog_menu i {
  color: #909399;
  font-size: 15px;
}

.el-icon-full-screen,
.el-icon-news {
  cursor: pointer;
}

::v-deep .v-modal {
  z-index: 20;
}

.block {
  font-size: 14px;
}

.all {
  width: 100%;
  height: 746px;
}

::v-deep th.el-table__cell {
  background-color: #fafafa;
}

::v-deep .el-table__cell {
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
}</style>